<template>
  <el-drawer :append-to-body="true" title="抄送人设置" v-model="visible" class="set_copyer" :show-close="false" :size="550"
    :before-close="saveCopyer">
    <div class="demo-drawer__content">
      <div class="copyer_content drawer_content">
        <el-button type="primary" @click="addCopyer">添加成员</el-button>
        <p class="selected_list">
          <span v-for="(item, index) in copyerConfig.nodeApproveList" :key="index">{{ item.name }}
            <img src="@/assets/images/flow/add-close1.png"
              @click="$func.removeEle(copyerConfig.nodeApproveList, item, 'targetId')">
          </span>
          <a v-if="copyerConfig.nodeApproveList && copyerConfig.nodeApproveList.length != 0"
            @click="copyerConfig.nodeApproveList = []">清除</a>
        </p>
        <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
          <el-checkbox :value="1">允许发起人自选抄送人</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <employees-role-dialog v-model:visible="copyerVisible" :data="checkedList" @change="sureCopyer" />
    </div>
  </el-drawer>
</template>
<script setup>
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue'
import $func from '@/utils/flow/index'
import { useStore } from '@/stores/index'
import { ref, watch, computed } from 'vue'
let copyerConfig = ref({})
let ccSelfSelectFlag = ref([])
let copyerVisible = ref(false)
let checkedList = ref([])
let store = useStore()
let { setCopyerConfig, setCopyer } = store
let copyerDrawer = computed(() => store.copyerDrawer)
let copyerConfig1 = computed(() => store.copyerConfig1)
let visible = computed({
  get() {
    return copyerDrawer.value
  },
  set() {
    closeDrawer()
  }
})
watch(copyerConfig1, (val) => {
  copyerConfig.value = val.value;
  ccSelfSelectFlag.value = copyerConfig.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig.value.ccSelfSelectFlag]
})

const addCopyer = () => {
  copyerVisible.value = true;
  checkedList.value = copyerConfig.value.nodeApproveList
}
const sureCopyer = (data) => {
  copyerConfig.value.nodeApproveList = data;
  copyerVisible.value = false;
}
const saveCopyer = () => {
  copyerConfig.value.ccSelfSelectFlag = ccSelfSelectFlag.value.length == 0 ? 0 : 1;
  copyerConfig.value.error = !$func.copyerStr(copyerConfig.value);
  setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id
  })
  closeDrawer();
}
const closeDrawer = () => {
  setCopyer(false)
}
</script>

<style lang="less">
.set_copyer {
  .copyer_content {
    padding: 20px 20px 0;

    .el-button {
      margin-bottom: 20px;
    }

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}
</style>
